<template>
	<view class="content">
		<view class="loginText">
			<view class="loginTextInput">
				<view class="">
					<text style="color: #000000;font-weight: 400;font-size: 26rpx;letter-spacing: 5rpx;">您的姓名:</text>
					<input type="text"
						style="font-size: 26rpx;margin-top: 20rpx;border-bottom-style: solid;border-bottom-width: 1rpx;border-bottom-color:#000000 ;color: #000000;"
						placeholder="请填写您的姓名" v-model="name" value="" />
				</view>
				<view class="" style="margin-top: 30rpx;">
					<text style="color: #000000;font-weight: 400;font-size: 26rpx;letter-spacing: 5rpx;">您的电话:</text>
					<input type="text"
						style="font-size: 26rpx;margin-top: 20rpx;border-bottom-style: solid;border-bottom-width: 1rpx;border-bottom-color:#000000 ;color: #000000;"
						placeholder="请填写您的电话" v-model="mobile" value=""/>
				</view>
				<view class="" style="margin-top: 30rpx;">
					<text style="color: #000000;font-weight: 400;font-size: 26rpx;letter-spacing: 5rpx;">详细地址(选填):</text>
					<input type="text"
						style="font-size: 26rpx;margin-top: 20rpx;border-bottom-style: solid;border-bottom-width: 1rpx;border-bottom-color:#000000 ;color: #000000;"
						placeholder="请填写您的详细地址" v-model="address" value="" />
				</view>

				<view>
					<view style="margin-top: 20rpx;letter-spacing: 5rpx;margin-bottom: 20rpx;"><text>是否已选好场地?</text></view>
					<radio-group @change="groudChange">
						<label v-for="(item, index) in items" :key="item.value" style="display: inline-block;">
							<view style="color: #000000;">
								<radio :value="item.value" :checked="index === groudCheck" />
								{{item.name}}
							</view>
						</label>
					</radio-group>
				</view>
				
				<view>
					<view style="margin-top: 20rpx;letter-spacing: 5rpx;margin-bottom: 20rpx;"><text>预计开店预算?</text></view>
					<radio-group @change="yusuanChange">
						<label v-for="(item, index) in yusuans" :key="item.value" style="display: inline-block;">
							<view style="color: #000000;">
								<radio :value="item.value" :checked="index === yusuanCheck" />
								{{item.name}}
							</view>
						</label>
					</radio-group>
				</view>
				
				<view>
					<view style="margin-top: 20rpx;letter-spacing: 5rpx;margin-bottom: 20rpx;"><text>是否有过线下门店考察或体验?</text></view>
					<radio-group @change="kaochaChange">
						<label v-for="(item, index) in kaochas" :key="item.value" style="display: inline-block;">
							<view style="color: #000000;">
								<radio :value="item.value" :checked="index === kaochaCheck" />
								{{item.name}}
							</view>
						</label>
					</radio-group>
				</view>
				
				<view style="font-size: 24rpx;margin-top: 30rpx;">
					<text>
						* 提交表单申请，工作人员将在3个工作日内与您电话联系
					</text>
				</view>
				<view style="font-size: 24rpx;margin-top: 10rpx;">
					<text>
						* 如需即时了解，请直接电话咨询，客服人员将第一时间解答。
					</text>
				</view>
				
				<view style="margin-top: 40rpx;display: flex;">
					<view style="flex: 2;border-style: solid;border-width: 1rpx;border-radius: 30rpx;border-color: #E36C54;color: #E36C54;text-align: center;height: 75rpx;line-height: 75rpx;" @click="call()"><text>电话咨询</text></view>
					<view style="flex: 1;"></view>
					<view @click="submit" style="flex: 2;border-style: solid;border-width: 1rpx;border-radius: 30rpx;border-color: #E36C54;background-color: #E36C54;color: white;text-align: center;height: 75rpx;line-height: 75rpx;"><text>提交申请</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import store from '@/store/index';
import { vShow } from "vue";
	export default {
		data() {
			return {
				items: [{
						value: '0',
						name: '是',
						checked: 'true'
					},
					{
						value: '1',
						name: '否'
					}
				],
				yusuans: [{
						value: '0',
						name: '10-15万',
						checked: 'true'
					},
					{
						value: '1',
						name: '20-30万'
					},
					{
						value: '2',
						name: '30万以上'
					}
				],
				kaochas: [{
						value: '0',
						name: '是',
						checked: 'true'
					},
					{
						value: '1',
						name: '否'
					}
				],
				groud:'是',
				yusuan:'10-15万',
				kaocha:'是',
				groudCheck:0,
				yusuanCheck:0,
				kaochaCheck:0,
				name:'',
				mobile:'',
				address:''
			};
		},
		onLoad(options) {},
		methods: {
			call(mobile) {
					uni.makePhoneCall({
						phoneNumber: "400-885-8778",
						success: function() {
							console.log('拨打电话成功');
						},
						fail() {
							console.log('打电话失败了');
						}
					})
			},
			groudChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.groud = this.items[i].name
						this.groudCheck = i
						break;
					}
				}
				console.log(this.groud)
			},
			yusuanChange: function(evt) {
				for (let i = 0; i < this.yusuans.length; i++) {
					if (this.yusuans[i].value === evt.detail.value) {
						this.yusuan = this.yusuans[i].name
						this.yusuanCheck = i
						break;
					}
				}
				console.log(this.yusuan)
			},
			kaochaChange: function(evt) {
				for (let i = 0; i < this.kaochas.length; i++) {
					if (this.kaochas[i].value === evt.detail.value) {
						this.kaocha = this.kaochas[i].name
						this.kaochaCheck = i
						break;
					}
				}
				console.log(this.kaocha)
			},
			async submit(){
				if(this.name=='' || this.mobile == ''){
					uni.showToast({
						icon:'error',
						title:'请补全信息.'
					}) 
					return false;
				}
				let params = {
					name:this.name,
					mobile:this.mobile,
					address:this.address,
					groud:this.groud,
					yusuan:this.yusuan,
					kaocha:this.kaocha
				}
				let data = await Api.apiCall('post', Api.qsg.join, params);
				if(data){
					uni.showToast({
						icon:'success',
						title:'提交成功'
					})
				}
				console.log(params)
			}
		}
	};
</script>

<style>
	.loginBtn {
		margin-top: 150rpx;
		width: 750rpx;
		height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.loginBtn button {
		color: #ffffff;
		font-size: 30rpx;
		background: #5684e4;
		line-height: 80rpx;
	}

	uni-button:after {
		border: none;
	}

	.loginName {
		flex: 1;
		border-bottom: 1px solid #efeef4;
		box-sizing: border-box;
	}

	.loginName input {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 478rpx;
		height: 89rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginName text {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 112rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginPassword {
		flex: 1;
	}

	.loginPassword input {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 478rpx;
		height: 89rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginPassword text {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 112rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginTextInput {
		background: #ffffff;
		width: 710rpx;
		height: 1500rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.loginText {
		width: 750rpx;
		height: 260rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}

	.content {
		background: #efeef4;
		height: 100vh;
		/* 		width:100vw; */
	}

	.text-area {
		color: #ffffff;
		width: 750rpx;
		height: 350rpx;
		background: #5684e4;
		text-align: center;
		font-size: 70rpx;
		line-height: 350rpx;
		letter-spacing: 20rpx;
	}
</style>
